<template>
  <div>


	<myheader></myheader>

	<br /><br />
	<!-- 面包屑导航 -->
	<Breadcrumb :datas='datas'></Breadcrumb>


	<section class="featured-block text-center">
		<div class="container">
			<Avatar :src='src' :width='100' fit='fill'></Avatar>
            <a href="/goodsshow">商品列表</a>
		</div>
		<hr>
        <center>
            <div>
                商品名称:<input type="text" name="name" id="name" v-model="name"><br /><br />
                商品描述:<input type="text" name="desc" id="desc" v-model="desc"><br /><br />
                商品图片:<input type="file" @change="uploadimg"><br /><br />
                
                <hr />
                物品标签:
                <TagInput v-model="tags" type="string" split="," placeholder="please input"></TagInput>
                <hr />



                演示视频:<input type="file" @change="uploadvideo">
                <video :src="'http://127.0.0.1:8000/static/upload/'+myvideo" width="200px" v-if="myvideo"></video>
                <br /><br />
                物品价格: <input type="text" name="price" id="price" v-model="price"><br /><br /><hr>
                <button @click="submit">添加</button>
            </div>

        </center>


	</section>
	<myfooter></myfooter>

	
	

    
  </div>
  
</template>


 
<script>

// 组件包含
import header from './header.vue';
import footer from './footer.vue';




export default {
  data () {
    return {
	  // 面包屑导航数据
	  	datas: [
			{title: '首页', route:{name: 'index'}},
			{title: '商品添加', route:{name: 'addgoods'}},
		],
        src:'',

        // 商品数据

        // 名称
        name:'',
        // 简介
        desc:'',
        // 标签
        tags: '',
        // 价格
        price:'',
        // 图片
        myimg:'',
        // 视频
        myvideo:'',
    }
  },
  mounted:function(){

  },
  methods:{
      

	  	// 文件上传到django服务器
		uploadimg(e){
			let file = e.target.files[0];
			let parme = new FormData;
			let config = {
				'Content-Type': 'multipart/form-data'
			}
			parme.append('file',file)
			this.axios.post('http://127.0.0.1:8000/uploadfile/',parme,config).then((result)=>{
				// console.log(result.data);
				this.myimg = result.data.filename + '.' + result.data.filetype;
				// console.log(this.myimg)
			})
        },
        // 视频上传
		uploadvideo(e){
			let file = e.target.files[0];
			let parme = new FormData;
			let config = {
				'Content-Type': 'multipart/form-data'
			}
			parme.append('file',file)
			this.axios.post('http://127.0.0.1:8000/uploadfile/',parme,config).then((result)=>{
				// console.log(result.data);
				this.myvideo = result.data.filename + '.' + result.data.filetype;
				// console.log(this.myvideo)
			})
        },
        // 添加按钮事件
        submit(){
            console.log(this.tags);
            this.axios.get('http://127.0.0.1:8000/addgoods/',{params:{
                'name': this.name,
                'desc': this.desc,
                'img': this.myimg,
                'price': this.price,
                'video': this.myvideo
			}}).then((result)=>{
                
                console.log(result.data.gid);
                let gid = result.data.gid;
                this.axios.get('http://127.0.0.1:8000/inserttags/', {
                    params:{
                        'gid': gid,
                        'tags': this.tags
                    }
                }).then((result)=>{
                    console.log(result.data)
                })

			})
        },
  },
  // 生命组件
  components:{
	  'myheader':header,
	  'myfooter':footer,
  }
}


</script>
 
<style>



</style>